<template>
    <div class="wrapper">
        <title-decorate v-if="type === 'flow'" titleName="管网流量监测"/>
        <title-decorate v-if="type === 'pressure'" titleName="管网压力监测"/>
        <title-decorate v-if="type === 'water'" titleName="水质监测"/>
        <title-decorate v-if="type === 'level'" titleName="液位监测"/>
        <div class="my-chart">
            <el-table v-if="type === 'flow'"
                      ref="websiteTable"
                      :cell-style="tableCellStyle"
                      class="my-table-box"
                      :data="pointList"
                      height="125"
                      border
                      style="width: 100%"
            >
                <el-table-column prop="third_point_name" label="监测点" width="174"></el-table-column>
                <el-table-column prop="累计正向流量" label="累计正向流量" width="95"></el-table-column>
                <el-table-column prop="瞬时流速" label="瞬时流速" width="70"></el-table-column>
                <el-table-column prop="电导比" label="电导比" width="60"></el-table-column>
            </el-table>
            <el-table v-if="type === 'pressure'"
                      ref="websiteTable"
                      :cell-style="tableCellStyle"
                      class="my-table-box"
                      :data="pointList"
                      height="125"
                      border
                      style="width: 100%"
            >
                <el-table-column prop="third_point_name" label="监测点"></el-table-column>
                <el-table-column prop="压力" label="压力" width="100"></el-table-column>
                <el-table-column prop="电量" label="电量" width="100"></el-table-column>
            </el-table>
            <el-table v-if="type === 'water'"
                      ref="websiteTable"
                      :cell-style="tableCellStyle"
                      class="my-table-box"
                      :data="pointList"
                      height="125"
                      border
                      style="width: 100%"
            >
                <el-table-column prop="third_point_name" label="监测点">
                </el-table-column>
                <el-table-column prop="PH" label="PH值" width="50"></el-table-column>
                <el-table-column prop="浊度" label="浊度" width="50"></el-table-column>
                <el-table-column prop="余氯" label="余氯" width="50"></el-table-column>
                <el-table-column prop="温度" label="温度" width="70"></el-table-column>
            </el-table>
            <el-table v-if="type === 'level'"
                      ref="websiteTable"
                      :cell-style="tableCellStyle"
                      class="my-table-box"
                      :data="pointList"
                      height="125"
                      border
                      style="width: 100%"
            >
                <el-table-column prop="third_point_name" label="监测点"></el-table-column>
                <el-table-column prop="液位" label="液位"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import TitleDecorate from "../../components/TitleDecorate.vue";
import {BigScreen} from "../../datastore/BigScreen";

export default {
    components: {TitleDecorate},
    props: {
        type: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            levelColor: {
                monitoringFlux: [],
                monitoringPressure: [],
            },
            data: [],
            pointList: [],
            timer: ''
        };
    },
    watch: {},
    computed: {},
    methods: {
        //设置表文字颜色值，可以在这里修改
        // :cell-style="TableCellStyle"
        scrollFun() {
            let divData = this.$refs.websiteTable.bodyWrapper;
            this.timer = setInterval(() => {
                divData.scrollTop += 1;

                if (divData.clientHeight + divData.scrollTop === (divData.scrollHeight - 10)) {
                    this.pointList.push(...this.data);
                }
            }, 50)
        },
        getData() {
            let that = this;
            let params = {};
            switch (this.type) {
                case 'flow':
                    params['type'] = '1';
                    break;
                case 'pressure':
                    params['type'] = '2';
                    break;
                case 'water':
                    params['type'] = '3';
                    break;
                case 'level':
                    params['type'] = '4';
                    break;
            }
            new BigScreen(this).getScreenList(params, (res) => {
                let temp;
                res.datas.forEach(item => {
                    let data = JSON.parse(item.device_message_data);
                    temp = {
                        third_point_name: item.device_message_name,
                        ...data
                    }
                    this.data.push(temp);
                })
                that.pointList = that.data;
                console.info(that.pointList);
                // if (that.pointList.length > 0) {
                //     that.pointList[0]['third_point_name'] = '乐天溪村片区(放马山150水池)总表';
                // }
            })
        },
        tableCellStyle(row, column) {
            if (row.column.label === "流量(m³)") {
                if (row.row.monitoringFlux < 0.1) {
                    return "color:yellow";
                } else if (row.row.monitoringFlux < 0.3) {
                    return "color:orange";
                } else if (row.row.monitoringFlux < 0.6) {
                    return "color:green";
                } else {
                    return "color:pink";
                }
            } else if (row.column.label === "压力(m³/h)") {
                if (row.row.monitoringFlux < 0.1) {
                    return "color:yellow";
                } else if (row.row.monitoringFlux < 0.3) {
                    return "color:orange";
                } else if (row.row.monitoringFlux < 0.6) {
                    return "color:green";
                } else {
                    return "color:pink";
                }
            }
        },
    },
    created() {
    },
    mounted() {
        this.getData();
        this.scrollFun();
    },
};
</script>
<style lang="scss" scoped>
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .my-chart {
        width: 100%;
        flex: 1;
        padding: 10px 0;
        box-sizing: border-box;
    }

    .my-table-box /deep/ {
        th {
            text-align: center;
            padding: 0 !important;
            height: 30px !important;
            line-height: 30px !important;

            font-size: 12px;
            color: #fff;
        }

        td {
            text-align: center;
            padding: 0 !important;
            height: 30px !important;
            line-height: 30px !important;
            font-size: 12px;
            color: #fff;
        }
    }

    /deep/ .el-table__body-wrapper {
        &::-webkit-scrollbar { // 整个滚动条
            width: 0; // 纵向滚动条的宽度
            background: rgba(213, 215, 220, 0.3);
            border: none;
        }

        &::-webkit-scrollbar-track { // 滚动条轨道
            border: none;
        }
    }

    /deep/ .el-table th.gutter {
        display: none;
        width: 0
    }

    /deep/ .el-table colgroup col[name='gutter'] {
        display: none;
        width: 0;
    }

    /deep/ .el-table__body {
        width: 100% !important;
    }

    /deep/ th {
        border-color: rgba(255, 255, 255, 0.1) !important;
        background-color: rgba(1, 166, 210, 0.1);
    }

    /deep/ .el-table,
    /deep/ tr,
    /deep/ td,
    /deep/ .el-table__expanded-cell {
        border-color: rgba(255, 255, 255, 0.1) !important;
        background-color: transparent !important;
    }

    /deep/ .el-table::before {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    /deep/ .el-table--border::after {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
}

</style>
